<template>
	<view class="navigation">
		<eui-navbar ref="EuiNavBar" title="可用券数量" displayable="true" color="#000000" backgroundColor="#FFFFFF"
			rightIcon="" />
		<eui-tab :tabs="tabData" :value="industryTabIndex" @change="tabChange" :tabStyle="tabStyle"></eui-tab>
		<view class="main-view">
			<scroll-view :style="{width:scrollWidth,height:scrollHeight}" scroll-y @refresherrefresh="onRefresh"
				@scrolltolower="templateLower" :refresher-enabled='true' :refresher-triggered="triggered">
				<view class="approve-list flex flex-direction-column font-size-28 margin-bottom-20"
					v-for="(item,index) in dataList" :key="index">
					<eui-card>
						<view class="title">
							<view class="twice">
								<view class="titletext">[{{item.strBatchNo}}]{{item.strBatchName}}</view>
							</view>
							<view v-if="industryTabIndex==0" class="status1">
								{{item.strStatus}}
							</view>
							<view v-else-if="industryTabIndex==1" class="status3">
								{{item.strStatus}}
							</view>
							<view v-else-if="industryTabIndex==2" class="status2">
								{{item.strStatus}}
							</view>
						</view>
						<view style="display: flex;">
							<view class="consumeitem">
								<view class="custtitle">券号</view>
								<view class="consumetext">{{item.strCouponNo}}</view>
							</view>
							<view class="consumeitem">
								<view class="custtitle">面值</view>
								<view class="accounttext">{{item.dValue}}</view>
							</view>
						</view>
						<view class="consumeitem">
							<view class="custtitle">可用时间</view>
							<view class="consumetext">{{dayjs(item.strSdate).format('YYYY-MM-DD HH:mm:ss')}} 至
								{{dayjs(item.strEdate).format('YYYY-MM-DD HH:mm:ss')}}
							</view>
						</view>
						<view class="consumeitem">
							<view class="custtitle">已用次数</view>
							<view class="consumetext">{{item.iUseTimes}}</view>
						</view>
						<view class="consumeitem">
							<view class="custtitle">领取时间</view>
							<view class="consumetext">{{dayjs(item.c_mk_dt).format('YYYY-MM-DD HH:mm:ss')}}</view>
						</view>
					</eui-card>
				</view>
				<view v-if="dataList.length == 0" class="no-data nodata" style="background-color: RGBA(255,255,255,0);">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
					<view class="color-888 font-size-28">暂无数据</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script setup lang="js">
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import service from '@/common/service';
	import {
		getCrmUrl,
		crmRequest,
		crmRequestAsync
	} from '@/hooks/crmServices';
	import dayjs from "dayjs";
	import dateRangUtil from '../../../common/dateRangUtil';
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');
	const customerno = ref('');
	const crmUrl = getCrmUrl();
	const triggered = ref(false);
	const dataList = ref([]);
	const tabData = ref([{
		name: '可用'
	}, {
		name: '过期'
	}, {
		name: '已用'
	}]);
	const PageSize = ref(10);
	const industryTabIndex = ref(0);
	const tabStyle = ref({
		justifyContent: 'space-around'
	});
	const pageList1 = ref({
		CurrentPage: 1, //第几页
		RowsCount: 0, //总条数
		PageCount: 1, //总页数
		data: [],
		cTime: '',
		c_selectTime: '全部',
		c_s: '',
		c_e: '',
	})
	const pageList2 = ref({
		CurrentPage: 1, //第几页
		RowsCount: 0, //总条数
		PageCount: 1, //总页数
		data: [],
		cTime: '',
		c_selectTime: '本周',
		c_s: '',
		c_e: '',
	})
	const pageList3 = ref({
		CurrentPage: 1, //第几页
		RowsCount: 0, //总条数
		PageCount: 1, //总页数
		data: [],
		cTime: '',
		c_selectTime: '本周',
		c_s: '',
		c_e: '',
	})
	// 获取列表高度
	onReady(() => {
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".rds-tabs");
				userInfoPage.boundingClientRect(function(data) {
					scrollHeight.value = (res.windowHeight - data.height - 50) + 'px';
				}).exec()
			}
		});
	})
	//查询未使用
	const QueryUnUsedInfoList = async () => {
		let request = {
			url: crmUrl.crmApi,
			data: {
				UniqueKey: "/crm/CustomerViewService",
				ObjectData: {
					IsNotPage: false,
					PageSize: PageSize.value,
					Tag: {
						strCustomerNo: customerno.value,
						strStatus: "正常",
						strIsEndDt: "否",
						strExceptCouponDefType: "字券"
					},
					...pageList1.value
				},
				MethodName: "GetCouponList",
			},
		}
		service.enjoyShowLoading('正在加载...');
		service.request(request, (res) => {
			if (res && res.data) {
				if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					console.log('QueryUnUsedInfoList')
					console.log(ObjectData)
					pageList1.value.RowsCount = ObjectData.RowsCount;
					pageList1.value.PageCount = ObjectData.PageCount;
					pageList1.value.CurrentPage = ObjectData.CurrentPage;
					pageList1.value.cTime = new Date();
					if (ObjectData.CurrentPage === 1) {
						pageList1.value.data = []
					}
					pageList1.value.data.push(...ObjectData.ReturnObject);
					dataList.value = pageList1.value.data;
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
			}
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
			console.log('失败')
		});
	}
	//查询已过期
	const QueryEndInfoList = async () => {
		let request = {
			url: crmUrl.crmApi,
			data: {
				UniqueKey: "/crm/CustomerViewService",
				ObjectData: {
					IsNotPage: false,
					PageSize: PageSize.value,
					Tag: {
						strCustomerNo: customerno.value,
						strStatus: "过期",
						strIsEndDt: "否",
						strExceptCouponDefType: "字券"
					},
					...pageList2.value
				},
				MethodName: "GetCouponList",
			},
		}
		service.enjoyShowLoading('正在加载...');
		service.request(request, (res) => {
			if (res && res.data) {
				if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					console.log('QueryUnUsedInfoList')
					console.log(ObjectData)
					pageList2.value.RowsCount = ObjectData.RowsCount;
					pageList2.value.PageCount = ObjectData.PageCount;
					pageList2.value.CurrentPage = ObjectData.CurrentPage;
					pageList2.value.cTime = new Date();
					if (ObjectData.CurrentPage === 1) {
						pageList2.value.data = []
					}
					pageList2.value.data.push(...ObjectData.ReturnObject);
					dataList.value = pageList2.value.data;
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
			}
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
			console.log('失败')
		});
	}
	//查询已使用
	const QueryUsedInfoList = async () => {
		let request = {
			url: crmUrl.crmApi,
			data: {
				UniqueKey: "/crm/CustomerViewService",
				ObjectData: {
					IsNotPage: false,
					PageSize: PageSize.value,
					Tag: {
						strCustomerNo: customerno.value,
						strStatus: "已用,转赠中,已转赠",
						strIsEndDt: "否",
						strExceptCouponDefType: "字券"
					},
					...pageList3.value
				},
				MethodName: "GetCouponList",
			},
		}
		service.enjoyShowLoading('正在加载...');
		service.request(request, (res) => {
			if (res && res.data) {
				if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					console.log('QueryUnUsedInfoList')
					console.log(ObjectData)
					pageList3.value.RowsCount = ObjectData.RowsCount;
					pageList3.value.PageCount = ObjectData.PageCount;
					pageList3.value.CurrentPage = ObjectData.CurrentPage;
					pageList3.value.cTime = new Date();
					if (ObjectData.CurrentPage === 1) {
						pageList3.value.data = []
					}
					pageList3.value.data.push(...ObjectData.ReturnObject);
					dataList.value = pageList3.value.data;
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
			}
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
			console.log('失败')
		});
	}
	onLoad(e => {
		console.log("e: " + JSON.stringify(e));
		customerno.value = e.custno
		QueryUnUsedInfoList();
	});
	const tabChange = e => {
		if (industryTabIndex.value !== e) {
			industryTabIndex.value = e;
			switch (e) {
				case 0:
					if (pageList1.value.cTime) {
						let minute = 0;
						minute = Math.floor((new Date() - pageList1.value.cTime) / (60 * 1000))
						console.log("上次查询距现在相差分钟数：" + minute)
						if (minute >= 1) {
							pageList1.value.CurrentPage = 1;
							pageList1.value.data = [];
							QueryUnUsedInfoList();
						} else {
							dataList.value = pageList1.value.data;
						}
					} else {
						pageList1.value.CurrentPage = 1;
						pageList1.value.data = [];
						QueryUnUsedInfoList();
					}
					break;
				case 1:
					if (pageList2.value.cTime) {
						let minute = 0;
						minute = Math.floor((new Date() - pageList2.value.cTime) / (60 * 1000))
						console.log("上次查询距现在相差分钟数：" + minute)
						if (minute >= 1) {
							pageList2.value.CurrentPage = 1;
							pageList2.value.data = [];
							QueryEndInfoList();
						} else {
							dataList.value = pageList2.value.data;
						}
					} else {
						pageList2.value.CurrentPage = 1;
						pageList2.value.data = [];
						QueryEndInfoList();
					}
					break;
				case 2:
					if (pageList3.value.cTime) {
						let minute = 0;
						minute = Math.floor((new Date() - pageList3.value.cTime) / (60 * 1000))
						console.log("上次查询距现在相差分钟数：" + minute)
						if (minute >= 1) {
							pageList3.value.CurrentPage = 1;
							pageList3.value.data = [];
							QueryUsedInfoList();
						} else {
							dataList.value = pageList3.value.data;
						}
					} else {
						pageList3.value.CurrentPage = 1;
						pageList3.value.data = [];
						QueryUsedInfoList();
					}

					break;
				default:
					break;
			}
		}
	}
	// 下拉刷新
	const onRefresh = () => {
		if (triggered.value) {
			return false;
		};
		triggered.value = true;

		switch (industryTabIndex.value) {
			case 0:
				pageList1.value.CurrentPage = 1;
				pageList1.value.data = [];
				QueryUnUsedInfoList();
				break;
			case 1:
				pageList2.value.CurrentPage = 1;
				pageList2.value.data = [];
				QueryEndInfoList();
				break;
			case 2:
				pageList3.value.CurrentPage = 1;
				pageList3.value.data = [];
				QueryUsedInfoList();
				break;
		}
		setTimeout(() => {
			triggered.value = false;
		}, 1000)
	}
	// 加载更多
	const templateLower = () => {
		switch (industryTabIndex.value) {
			case 0:
				if (pageList1.value.CurrentPage < pageList1.value.PageCount) {
					pageList1.value.CurrentPage = pageList1.value.CurrentPage + 1;
					QueryUnUsedInfoList();
				}
				break;
			case 1:
				if (pageList2.value.CurrentPage < pageList2.value.PageCount) {
					pageList2.value.CurrentPage = pageList2.value.CurrentPage + 1;
					QueryEndInfoList();
				}
				break;
			case 2:
				if (pageList3.value.CurrentPage < pageList3.value.PageCount) {
					pageList3.value.CurrentPage = pageList3.value.CurrentPage + 1;
					QueryUsedInfoList();
				}
				break;
		}
	}
</script>

<style scoped lang="scss">
	@import '@/main.scss';

	.status1 {
		display: flex;
		border: 1px solid #159C02;
		color: #159C02;
		background-color: #e1f4ec;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.status2 {
		display: flex;
		border: 1px solid #235BDA;
		color: #235BDA;
		background-color: #c7f2f0;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.status3 {
		display: flex;
		border: 1px solid #999999;
		color: #999999;
		background-color: #e6e6e6;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.consumetext {
		font-size: 13px;
		margin-top: 4rpx;
	}

	.consumeitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 4rpx;
	}

	.custtitle {
		font-size: 26rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
		color: #8a8a8a;
	}

	.title {
		display: flex;
		margin-bottom: 20rpx;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.twice {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.titletext {
		margin-right: 20rpx;
		font-weight: 600;
	}

	.accounttext {
		display: flex;
		color: #2bc1e6;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.nodata {
		display: flex;
		flex-direction: column;
	}

	.numadd {
		display: flex;
		justify-content: flex-end;
		color: #4dcf04;
	}

	.numcut {
		display: flex;
		justify-content: flex-end;
		color: #d81e06;
	}

	.navigation {
		display: flex;
		width: 100%;
		flex-direction: column;
		background: #F2F2F2;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
	}

	.m-card-input-view2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: $uni-bg-color-inverse;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EEEEEE;
		padding-left: 0px;
		justify-content: center; //纵向均匀排列
	}

	.m-card-input-title2 {
		width: 185rpx;
		height: 40rpx;
	}

	.m-title-text2 {
		font-size: $uni-font-size-level3;
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		color: $uni-text-color-title;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.time-view {
		display: flex;
		flex-direction: column;
	}
</style>